<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
v-if  v-else-if  v-else
条件性的渲染某元素，判定为true时渲染,否则不渲染(满足条件页面有这个标签，不满足页面没有这个标签)

v-show
根据条件展示某元素，区别在于切换的是display属性的值(论是否满足，页面都有这个标签，只是不满足时页面不显式)
-->
<div id="app">
    <b>请输入年龄</b>
    <br/>
    <input type="text" v-model="age">
    <br>
    年龄{{age}},经判定为:
    <span v-if="age <= 35">年轻人</span>
    <span v-else-if="age > 35&& age<60">中年人</span>
    <span v-else>老年人</span>
    <br>
    年龄{{age}},经判定为:
    <span v-show="age<=35">年轻人</span>
</div>
</body>
</html>

<script>
    new Vue({
        el: "#app",
        data: {
            age: 0
        },
        methods: {}
    })
</script>